<template>
	<div>
		<el-button type="primary" icon="plus" round @click="selectProcessForm">选择流程表单</el-button>
		<el-tag v-if="modelValue?.formId" class="ml-2" size="small" closable @close="delProcessForm">{{ selected_label || '-' }}</el-tag>
		<!-- 查看流程表单 查看 -->
		<el-dialog v-model="visible" class="le-dialog local-select-process-form-dialog" title="选择流程表单" width="272">
			<!--			<el-scrollbar max-height="400px">
				<div class="content">
					<div v-for="(_, i) of Array.from({ length: 40 })" :key="i">
						我是内容 <br />
						{{ i }}
					</div>
				</div>
			</el-scrollbar>-->
			<!--			240+32-->
			<le-select
				v-model="localValue"
				class="w-[240px]"
				:height="600"
				:is-popover="false"
				:options="optionsRef.list"
				value-key="id"
				label-key="name"
				:loading="optionsRef.loading"
				@update:selected_label="update_selected_label"
			>
				<template #default="{ item, index, disabled }">
					<div class="item">
						{{ item.name }} <el-tag class="ml-2" size="small">{{ typeOptions_config[item.type] || '-' }}</el-tag>
					</div>
				</template>
			</le-select>
			<template #footer>
				<el-button @click="closeDialog">关 闭</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, type PropType, reactive, ref, watch } from 'vue'
import formtemplate from '@/api/flow/formtemplate.ts'
import { typeOptions_config } from '@/views/flow/form/data.tsx'
// import { processTaskApprovalInfo } from '@/api/flow/processTask'
// import { ElMessage } from 'element-plus'
// import { formatTimestamp } from '@/utils/datetime.ts'

const props = defineProps({
	modelValue: {
		required: true,
		type: Object as PropType<{ formId: string; formName?: string }>,
		default: () => ({ formId: undefined, formName: undefined })
	}
	// value: {
	// 	type: String,
	// 	default: ''
	// }
})
const emits = defineEmits(['update:modelValue' /*, 'update:value'*/])
const localValue = ref<any>(undefined)
watch(
	() => props.modelValue,
	val => {
		localValue.value = val?.formId
	}
)
const optionsRef = ref({ list: [], loading: false })
formtemplate.formTemplatePageApi({ page: 1, pageSize: 9999 }).then((res: any) => {
	optionsRef.value = {
		loading: false,
		list: res.records
	}
})
const selected = computed(() => {
	const formId = props.modelValue.formId
	return optionsRef.value.list.find(v => v.id === formId)
})
const selected_label = computed(() => {
	return selected.value?.name
})
const local_selected_label = ref()
const update_selected_label = (label: string) => {
	// console.log(label, 'label')
	local_selected_label.value = label
}
const visible = ref(false)
const selectProcessForm = () => {
	console.log('selectProcessForm')
	visible.value = true
	localValue.value = props.modelValue?.formId
}
const delProcessForm = () => {
	console.log('delProcessForm')
	emits('update:modelValue', {})
}

const queryDetail = () => {}
onMounted(queryDetail)
const closeDialog = () => {
	// emits('update:modelValue', false)
	visible.value = false
}
const submit = () => {
	emits('update:modelValue', { formId: localValue.value, formName: local_selected_label.value })
	closeDialog()
}

/*const visible = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})*/
</script>

<style scoped lang="scss">
.flow-detail-content {
}
.item {
	display: flex;
	align-items: center;
}
</style>
<style lang="scss">
// 全局样式
.local-select-process-form-dialog {
	.el-dialog__body {
		//height: calc(100vh - 160px);
		//height: calc(100vh - 200px);
		//max-height: calc(100vh - 200px);
		padding: 12px 16px;
	}
}
</style>
